<template>
	<view>
		<view class="search">
			<uni-search-bar @confirm="search" v-model="searchStr" @input="input" placeholder="搜索">
			</uni-search-bar>
		</view>
		<view class="activity">
			<text v-if="activites==[]">暂无活动</text>
			<uni-card class="activityItem" @click="toDetail(item)" v-for="(item, index) in activites" :key="index">
				<view class="top">
					<view class="left">
						<image mode="aspectFill" class="loading" :src="item.cover">
						</image>
					</view>
					<view class="right">
						<view class="title ">{{item.name}}</view>
						<view class="date">08月20日08:35~08:35周六</view>
						<view class="count">报名人数：1/{{item.maxCount}}</view>
					</view>
				</view>
				<view class="bottom">
					<text class="text-type">#{{getType(item.type)}}</text>
					<text class="status comm">报名中</text>
					<text class="status" v-show="false">活动结束</text>
				</view>
			</uni-card>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		queryAllActivite
	} from '../../api/activite.js';
	export default {
		data() {
			return {
				searchStr: '',
				cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
				avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'gear-filled'
				},
				activites: []
			};
		},

		methods: {
			search(res) {

			},
			input(res) {
				if (res) {
					this.activites = this.activites.filter(i => i.name.indexOf(res) != -1);
				} else {
					this.getData();
				}
			},
			getData() {
				queryAllActivite().then(res => {
					this.activites = res;
				})
			},
			getType(type) {
				switch (type) {
					case 1:
						return "室内活动";
					case 2:
						return "公益活动";
					case 3:
						return "户外活动";
					case 4:
						return "其他活动";

				}
			},
			toDetail(item) {
				this.$Router.push({
					name: 'community-detail',
					params: {
						id: item.id
					}
				})
			},
		},
		onLoad() {
			this.getData()
		}
	}
</script>

<style lang="less">
	.activity {
		padding-bottom: 20rpx;
	}

	.search {
		width: 100%;
		height: 100%;
		background-color: #fff;
		position: sticky;
		top: 80rpx;
		z-index: 999;
	}

	.activityItem:active {
		background: #E2E2E2;

	}

	.top {
		width: 100%;
		display: flex;

		.left {
			padding: 0;
			margin-right: 20rpx;
			margin-left: -16rpx;

			image {
				width: 265rpx;
				height: 185rpx;
				border-radius: 10rpx;
			}
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: space-between;
			text-align: left;

			.title {
				font-size: 33rpx;
				color: #000;
				line-height: 1.5;
				width: 100%;
				font-weight: bold;
				height: 60rpx;
			}

			.date {
				width: 100%;
				font-size: 26rpx;
				margin-top: 15rpx;
				color: #999;
			}

			.count {
				width: 100%;
				font-size: 26rpx;
				color: #999;
			}
		}

	}

	.bottom {
		width: 100%;
		font-size: 28rpx;
		margin-top: 8rpx;
		text-align: right;
		margin-bottom: 10rpx;
		padding-right: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>
